<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.css" th:href="@{/css/bootstrap.css}" />
    <link rel="stylesheet" type="text/css" href="/css/back-index.css" th:href="@{/css/back-index.css}" />
<!--    <link rel="stylesheet" href="/layui/css/layui.css" th:href="@{/layui/css/layui.css}" media="all">-->
    <script src="/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/bootstrap-paginator.js"></script>
    <script src="/js/bootstrap-mypaginator.js"></script>
<!--    <script src="/layui/layui.js"></script>-->
    <script>
        $(function () {
            let options={
                bootstrapMajorVersion:3,
                // currentPage:"${session.pageUsers.pageNum==0?1:session.pageUsers.pageNum}",
                currentPage:[[${chapterSearchPageInfo.pageNum}]]==0?1:[[${chapterSearchPageInfo.pageNum}]],
                // totalPages:"${pageUsers.pages==0?1:pageUsers.pages}",
                totalPages:[[${chapterSearchPageInfo.pages}]]==0?1:[[${chapterSearchPageInfo.pages}]],
                pageSize:[[${chapterSearchPageInfo.pageSize}]],
                alignment: "center",
                pagination:true,
                onPageClicked: function (event,originalEvent,type,page) {
                    $("#showList").empty();
                    $("#showList").load("/chapter/searchChapters",{"title":$("#course-resource-title-search").val(),"status":$("#course-resource-stauts-search").val(),
                        "id":$("#id").val(),"dateStart":$("#dateStart").val(),"dateEnd":$("#dateEnd").val(),"courseId":$("#course-resource-info-search").val(),"pageNo":page});
                    $("#myPages").hide();
                }

            }
            $("#chapterSearchPages").bootstrapPaginator(options);
        })
    </script>
</head>
<body>
<div class="show-list" id="showList">
    <table class="table table-bordered table-hover" style='text-align: center;'>
        <thead>
        <tr class="text-danger">
            <th class="text-center">章节编号</th>
            <th class="text-center">课程编号</th>
            <th class="text-center">标题</th>
            <th class="text-center">简介</th>
            <th class="text-center">创建时间</th>
            <th class="text-center">状态</th>
            <th class="text-center">操作</th>
        </tr>
        </thead>
        <tbody id="tb">
        <tr th:each="chapter:${chapterSearchPageInfo.list}">
            <td th:text="${chapter.id}"></td>
            <td th:text="${chapter.courseId}"></td>
            <td th:text="${chapter.title}"></td>
            <td th:text="${chapter.info}"></td>
            <td th:text="${chapter.createDate}"></td>
            <td th:text="${chapter.status}==1?'启用':'禁用'"></td>
            <td class="text-center" >
                <input type="button" class="btn btn-warning btn-sm course-reource-modify-btn" value="修改" th:onclick="|javascript:selectChapter('${chapter.id}')|">
                <input type="button" th:class="${chapter.status}==1?'btn btn-danger btn-sm':'btn btn-success btn-sm'" th:value="${chapter.status}==1?'禁用':'启用'"
                       th:onclick="|javascript:modifyStatus('${chapter.id}','${chapter.status}','${chapter.courseId}')|">
                <input type="button" class="btn btn-info btn-sm resource-detail" value="详情" />
                <input type="button" class="btn btn-success btn-sm comment-detail" value="相关评论" />
            </td>
        </tr>
        </tbody>
    </table>
    <!-- 分页 -->
    <div style="text-align: center;" >
        <ul id="chapterSearchPages" ></ul>
    </div>
</div>

</body>
</html>